
import styles from './style.less';
import { Button, Tabs, Space, Dropdown, Menu, Input } from 'antd';
import { useEffect, useState } from 'react';
import { connect, Link, history } from 'umi';
import { RightOutlined, SettingOutlined, MoreOutlined } from '@ant-design/icons'
import ProjectStatus from '../ProjectStatus'
const { Search } = Input;

const { TabPane } = Tabs;

const ProjectHeader = (props) => {
    const {
        content,
        dispatch,
        projectId,
        activeTab,
        onChangeTab,
        projectBrief,
        permissionData,
        list,
    } = props

    const [tabKey, setTabKey] = useState(activeTab);
    const [isProjectCollapse, setIsProjectCollapse] = useState(false);
    const [showList, setShowList] = useState([])

    useEffect(() => {
        setShowList(list)
    }, [list])

    useEffect(() => {
        console.log('activeTab:', activeTab)
        setTabKey(activeTab)
    }, [activeTab])

    useEffect(() => {
        setTabKey(activeTab)
        if (projectId) {
            dispatch({
                type: 'project/getProjectBrief',
                payload: projectId
            });
        }
    }, [projectId])

    useEffect(() => {
        if (isProjectCollapse) {
            if (!list || list.length === 0) {
                dispatch({
                    type: 'project/page',
                    payload: {
                        inStatus: "0,1"
                    }
                });
            }
        }
    }, [isProjectCollapse])

    const handleVisibleChange = (flag) => {
        setIsProjectCollapse(flag)
    }
    const onSelectProject = (item) => {
        console.log(item)
        setIsProjectCollapse(false)
        history.push(`/projects/${item.id}/detail`)
    }

    const menu = (
        <Menu>
            <Menu.Item ><Search placeholder="项目名"
                onSearch={(name) => {
                    if (!name || name.trim() === "") {
                        setShowList(list)
                    } else {
                        setShowList(list.filter(item => item.name.indexOf(name) > -1))
                    }
                }} /></Menu.Item>
            <Menu.Divider />
            {showList && showList.map((item) => {
                return <Menu.Item key={item.id} onClick={() => {
                    onSelectProject(item)
                }}>
                    <Space>
                        <div className={styles.menuProjectName}>
                            {item.name}
                        </div>
                        <ProjectStatus status={item.status}>
                        </ProjectStatus>
                    </Space>
                </Menu.Item>
            })}
            <Menu.Divider />
            <Menu.Item icon={<MoreOutlined />}>
                <Link to="/projects">所有项目</Link>
            </Menu.Item>
        </Menu>
    );

    const leftEntra = (<Space className={styles.projectNameSpace}>
        <div className={styles.projectName}>项目:{projectBrief && projectBrief.name}</div>
        <Dropdown trigger="click"
            placement="bottomCenter"
            onVisibleChange={handleVisibleChange}
            visible={isProjectCollapse}
            arrow
            overlay={menu}>
            <RightOutlined onClick={() => {
                console.log(!isProjectCollapse)
                setIsProjectCollapse(!isProjectCollapse)
            }} rotate={isProjectCollapse ? 90 : 0} />
        </Dropdown>

    </Space>)

    const rightEntra = (<Space className={styles.extraActon}>
        <SettingOutlined />
    </Space>)

    const onChangeTabSwitch = (key) => {
        if (onChangeTab) {
            onChangeTab(key)
        }
    }
    return (
        <>
            <div className={styles.projectHeander}>
                <Tabs
                    activeKey={tabKey}
                    tabBarGutter={-8}
                    tabBarExtraContent={{
                        left: leftEntra,
                        right: rightEntra
                    }}
                    onChange={onChangeTabSwitch}
                >
                    <TabPane tab="详情" key="detail">
                    </TabPane>
                    {permissionData?.task && <TabPane tab="任务" key="task">
                    </TabPane>}
                    {permissionData?.bug && <TabPane tab="BUG" key="bug">
                    </TabPane>}
                    {permissionData?.demand && <TabPane tab="需求" key="demand">
                    </TabPane>}
                    {permissionData?.prod && <TabPane tab="迭代计划" key="prod">
                    </TabPane>}
                    {permissionData?.dev && <TabPane tab="开发项" key="dev">
                    </TabPane>}
                    {permissionData?.qa &&  <TabPane tab="测试项" key="qa">
                    </TabPane>}
                    {permissionData?.article &&  <TabPane tab="文档" key="article">
                    </TabPane>}
                    {permissionData?.wiki &&  <TabPane tab="Wiki" key="wiki">
                    </TabPane>}
                    {permissionData?.knowledge &&  <TabPane tab="知识库" key="knowledge">
                    </TabPane>}
                    {permissionData?.api &&  <TabPane tab="接口文档" key="api">
                    </TabPane>}
                    {permissionData?.member &&  <TabPane tab="成员" key="member">
                    </TabPane>}
                </Tabs>
            </div>
            {content}
        </>
    )
}
export default connect(({ project }) => ({
    list: project.projectData ? project.projectData.list : [],
    projectBrief: project.projectBrief
}))(ProjectHeader);

